<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->

</head>

<script src='./js/echarts.js'></script>
<script src='./js/ecStat.js'></script>

<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="content" style="width: 800px;height:900px;margin: 0 auto;">
    <div id="main" style="width: 100%;height:400px;"></div>
    <div id="liner" style="width: 100%;height:400px;"></div>
</div>
<script>
    function DefaultHttp(callback) {
        this.mCallback = callback;

        var send = function (url, callback, isPost, params) {
            var cType = isPost ? "application/json" : "application/x-www-form-urlencoded";
            var http = new XMLHttpRequest();
            http.open(isPost ? "POST" : "GET", url, true);
            http.setRequestHeader("Content-type", cType);
            http.onreadystatechange = function () {//Call a function when the state changes.
                if (http.readyState === 4) {
                    if (http.status === 200) {
                        callback.onMsg(http.responseText);
                    } else {
                        callback.onErr(http.status, http.statusText);
                    }
                }
            };
            if (isPost) {
                if (typeof params === "object") {
                    http.send(JSON.stringify(params));
                } else {
                    http.send(params);
                }
            } else {
                http.send(null);
            }
        };

        this.get = function (url, callBack) {
            send(url, callBack || this.mCallback, false, null);
        };
        this.post = function (url, params) {
            send(url, this.mCallback, true, params);
        };
    }

    var Http = new DefaultHttp();



    var getUrl = function (uri) {
        return "http://"+window.location.host+window.location.pathname+uri;
    };


    var GetUrlParam = function (paraName) {
        var url = document.URL.toString();
        var arrObj = url.split("?");

        if (arrObj.length > 1) {
            var arrPara = arrObj[1].split("&");
            var arr;

            for (var i = 0; i < arrPara.length; i++) {
                arr = arrPara[i].split("=");

                if (arr != null && arr[0] === paraName) {
                    return arr[1];
                }
            }
        }
        return "";
    };
</script>


<script>
    var xAxisNameArray = [40, 100, 200, 500, 9999];
    var valuesArray = [
        {value: 600, name: xAxisNameArray[0]},
        {value: 200, name: xAxisNameArray[1]},
        {value: 100, name: xAxisNameArray[2]},
        {value: 80, name: xAxisNameArray[3]},
        {value: 20, name: xAxisNameArray[4]}
    ];
    var option = {
        title: {
            text: "Ping值分布图",
            subtext: "南丁格尔玫瑰",
            x: "center"
        },
        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            x: "center",
            y: "bottom",
            data: xAxisNameArray
        },
        toolbox: {
            show: false,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {
                    show: true,
                    type: ["pie", "funnel"]
                },
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        calculable: true,
        series: [
            {
                name: "数据",
                type: "pie",
                radius: [30, 110],
                center: ["50%", "50%"],
                roseType: "area",
                data: valuesArray
            }
        ]
    };

    var myChart = echarts.init(document.getElementById("main"));
    myChart.setOption(option);

    ///////////////////////////////////////////////////////
    function randomData() {
        var now = new Date();
        var value = Math.random() * 100;
        return {
            name: now.toString(),
            value: [
                now.getTime(),
                Math.round(value)
            ]
        };
    }

    var data = [];
    var maxRange = 60;
    for (var i = 0; i < 0; i++) {
        data.push(randomData());
    }

    var option = {
        title: {
            text: "实时Ping值图",
            x: "center",
            top: 20,
        },
        tooltip: {
            trigger: "axis",
            formatter: function (params) {
                params = params[0];
                var date = new Date(params.name);
                let s = date.getHours() + ":" + date.getMinutes() + ":" + (date.getSeconds()) + "  " + params.value[1];
                return s;
            },
            axisPointer: {
                animation: false
            }
        },
        xAxis: {
            type: "time",
            splitLine: {
                show: true
            }
        },
        yAxis: {
            type: "value",
            boundaryGap: [0, "100%"],
            splitLine: {
                show: true
            }
        },
        series: [{
            name: "模拟数据",
            type: "line",
            showSymbol: false,
            hoverAnimation: true,
            data: data
        }]
    };
    var realTimeData = [];
    setInterval(function () {

        Http.get(getUrl("get?ID="+GetUrlParam("ID")), {
                onMsg: function (res) {

                    var data1 = JSON.parse(res);
                    var data = [];
                    for (var i = 0; i < data1.length; i++) {
                        data.push(JSON.parse(data1[i]));
                    }
                    realTimeData = data;
                    canvas.setOption({
                        series: [{
                            data: data
                        }]
                    });
                },
                onErr: function (e) {
                    console.log("[INFO]  " + e);
                }
            }
        );


    }, 1000);

    var canvas = echarts.init(document.getElementById("liner"));
    canvas.setOption(option);


    setInterval(function () {
        var counts = [0, 0, 0, 0, 0];
        for (var i = 0; i < realTimeData.length; i++) {
            var v = realTimeData[i].value[1];
            for (var j = 0; j < xAxisNameArray.length; j++) {
                if (v < xAxisNameArray[j]) {
                    counts[j] = counts[j] + 1;
                    break;
                }
            }
        }
        for (var j = 0; j < xAxisNameArray.length; j++) {
            valuesArray[j] = {value: counts[j], name: xAxisNameArray[j]};
        }

        myChart.setOption({
            series: [{
                data: valuesArray
            }]
        });
    }, 4321);


    // setInterval(function () {
    //     var now = new Date();
    //     var value = Math.random() * 100;
    //     var data = JSON.stringify({
    //         name: now.toString(),
    //         value: [
    //             now.getTime(),
    //             Math.round(value)
    //         ]
    //     });
    //     Http.get(getUrl("add?value=" + data), {
    //             onMsg: function (res) {
    //                 // console.log("[INFO]  "+res);
    //             },
    //             onErr: function (e) {
    //                 console.log("[INFO]  " + e);
    //             }
    //         }
    //     );
    // }, 1000);

</script>
</body>
</html>